<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上载演示</title>
    <script src="bower_components/jquery/dist/jquery.min.js" ></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<form id="demoForm" method="post"
      enctype="multipart/form-data"
      action="/upload/file" >
    <div>
        <label>上传文件
            <input id="imageFile" type="file" name="imageFile">
        </label>
    </div>
    <button type="submit">上传文件</button>
</form>
<img id="image" src="http://localhost:8899/a.jpg"  alt="">
</body>
<script>
//jquery代码的表单提交事件
$("#demoForm").submit(function(){
    //获得用户选中的所有图片(获得数组)
    let files=document.getElementById("imageFile").files;
    if(files.length>0){
        //获得用户选中的唯一图片(从数组中取出)
        let file=files[0];
        //开始上传这个图片
        //由于上传代码比较多,不想和这里其它代码干扰,所以定义一个方法调用
        uploadImage(file);
    }
    //阻止表单提交效果
    return false;
});
// 将file上传到服务器的方法
function uploadImage(file){
    //定义一个表单
    let form=new FormData();
    //将图片添加到表单中
    form.append("imageFile",file);
    //异步提交
    axios({
        url:"/upload/file",
        method:"post",
        data:form
    }).then(function(response){
        $("#image").attr("src",response.data);
        alert(response.data);
    })
}



</script>


</html>